<template>
  <div class="container">
    <div class="banner"></div>
    <div class="cont-warp flex flex-column flex-center">
      <div class="warp-option w-920 text-center">
        <h3>入驻流程</h3>
        <div class="option-part w-920 flex flex-between">
          <div class="part-list" :key="item.id" v-for="item in supp">
            <img :src="item.src" alt="#" width="130" height="130" />
            <p>{{ item.cont }}</p>
            <img class="img2" :src="item.src2" />
          </div>
        </div>
      </div>
      <div class="applyfor">
        <div class="w-1036">
          <div class="form-title">
            <h3>入驻申请</h3>
          </div>
          <form class="applyfor-form" action="" method="" name="">
            <input type="text" placeholder="您的姓名" /><br />
            <input type="text" placeholder="您的手机号码" /><br />
            <input type="text" placeholder="您要供应的资源" /><br />
            <input type="submit" value="提交信息" />
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'jion-page',
  components: {},
  data() {
    return {
      supp: [
        {
          src: require('@/assets/img/pen.png'),
          src2: require('@/assets/img/rightwards.png'),
          cont: '填写信息'
        },
        {
          src: require('@/assets/img/briefcase.png'),
          src2: require('@/assets/img/rightwards.png'),
          cont: '签约合作'
        },
        {
          src: require('@/assets/img/use.png'),
          src2: require('@/assets/img/rightwards.png'),
          cont: '洽谈资源'
        },
        {
          src: require('@/assets/img/notepad.png'),
          cont: '商务联系'
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.banner {
  margin-top: 80px;
  height: 380px;
  width: 100%;
  background: #fff url("@/assets/img/suppliers-banner.jpg") no-repeat
    center/cover;
}
/* ======== warp-option start ======== */
.warp-option {
  padding: 88px 0 126px;
}
.warp-option h3 {
  margin-bottom: 74px;
}
.option-part .img2 {
  position: absolute;
  top: 55px;
  right: -90px;
}

.part-list {
  position: relative;
  transition: 0.2s linear;
}
.part-list img {
  cursor: pointer;
}
.part-list p {
  margin-top: 28px;
  line-height: 20px;
  font-size: 20px;
  color: #333;
  cursor: pointer;
}
.part-list:hover {
  transform: scale(1.1);
}
/* ======== warp-applyfor start ======== */
.applyfor {
  box-sizing: border-box;
  height: 580px;
  width: 100%;
  background: #fff url("@/assets/img/register-bgimg.jpg") no-repeat center/cover;
}
.applyfor-form {
  margin-top: 42px;
}
.form-title {
  margin-top: 65px;
}
.form-title:before {
  display: inline-block;
  content: "";
  width: 2px;
  height: 36px;
  vertical-align: middle;
  background-color: #333333;
}
.form-title h3 {
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px;
}
.applyfor-form input[type="text"] {
  margin-bottom: 30px;
  padding: 0 20px;
  width: 493px;
  height: 60px;
  border: 1px solid #d3d3d3;
  font-size: 16px;
  color: #999;
}
/* ========== apply-btn start ========== */
.applyfor-form input[type="submit"] {
  margin-top: 21px;
  width: 150px;
  text-align: center;
  height: 40px;
  border-radius: 20px;
  font-size: 16px;
  color: #ff7200;
  border: 1px solid #ff7200;
  background-color: #fff;
  cursor: pointer;
}
.applyfor-form input[type="submit"]:hover {
  color: #fff;
  background-color: #ff7200;
}

.part-list .img2:hover {
  transform: none;
}
</style>
